<template>
  <div class="wallet-selection">
    <div class="header">
      <h3>{{ $t("side.side4") }}</h3>
      <button class="close-btn" @click="close">✕</button>
    </div>
    <div
      v-for="(wallet, index) in wallets"
      :key="index"
      class="wallet-item"
      @click="selectWallet(wallet)"
    >
      <div class="flex-warp  justify-start items-center">
        <img :src="wallet.icon" class="wallet-icon" />
        <span>{{ wallet.name }}</span>
      </div>

      <div class="wallet-checkmark">
        <!-- 根据是否选中，显示对号 -->
        <img
          v-if="selectedWallet === wallet.name"
          src="../assets/image/home/right.png"
          alt=""
          class="rightimg"
        />
      </div>
    </div>
    <div @click="confirmSelection" class="confirm-btn">
      {{ $t("side.side5") }}
    </div>
  </div>
</template>
<script>
import Web3 from "web3";
import WalletConnectProvider from "@walletconnect/web3-provider";
// var provider = new WalletConnectProvider({
//   rpc: {
//     1: "https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
//   },
//   chainId: 1, //需要连接的区块链id
//   networkId: 1,
//   qrcode: true, //二维码是否开启
// });
// const provider = new WalletConnectProvider({
//   rpc: {
//     97: "https://data-seed-prebsc-1-s1.binance.org:8545/", // BSC Testnet RPC
//   },
//   chainId: 97, // BSC 测试网 chainId
//   networkId: 97,
//   qrcode: false, // 启用二维码
//   bridge: "https://bridge.walletconnect.org", 
// });
export default {
  data() {
    return {
      wallets: [
        {
          name: "Binance Web3 Wallet",
          icon: require("../assets/image/binance-icon.png"),
        },
        {
          name: "MetaMask",
          icon: require("../assets/image/metamask-icon.png"),
        },
        {
          name: "Token Pocket",
          icon: require("../assets/image/tokenpocket-icon.png"),
        },
      ],
      selectedWallet: "Binance Web3 Wallet",
    };
  },
  methods: {
    // 选择钱包
    selectWallet(wallet) {
      this.selectedWallet = wallet.name;
      // this.$store.commit("setSelectedWallet", wallet.name);
    },

    // 确认选择并处理登录逻辑
    async confirmSelection() {
      this.connectMetaMask();
      // const selectedWallet = this.selectedWallet;
      // if (selectedWallet) {
      //   switch (selectedWallet) {
      //     case "Binance Web3 Wallet":
      //       await this.connectBinanceWallet();
      //       break;
      //     case "MetaMask":
      //       await this.connectMetaMask();
      //       break;
      //     case "Token Pocket":
      //       await this.connectTokenPocket();
      //       break;
      //     default:
      //       alert("无效的钱包选择");
      //   }
      // } else {
      //   alert("请选择一个钱包");
      // }
    },

    // Binance Web3 Wallet 登录逻辑
    async connectBinanceWallet() {
      try {
        const provider = window.BinanceChain;
        if (!provider) {
          alert("请安装 Binance Web3 Wallet 扩展");
          return;
        }
        const accounts = await provider.request({
          method: "eth_requestAccounts",
        });
        this.account = accounts[0];
        console.log("Binance Web3 Wallet 连接成功:", this.account);
        // 在这里处理登录逻辑，例如保存账户信息
        sessionStorage.setItem("account", this.account);
        this.$router.back();
      } catch (error) {
        console.error("Binance Web3 Wallet 登录失败:", error);
      }
    },

    // MetaMask 登录逻辑
    async connectMetaMask() {
      try {
        if (typeof window.ethereum !== "undefined") {
          const accounts = await window.ethereum.request({
            method: "eth_requestAccounts",
          });
          this.account = accounts[0];
          console.log("MetaMask 连接成功:", this.account);
          // 在这里处理登录逻辑
          sessionStorage.setItem("account", this.account);
          this.$router.back();
        } else {
          alert("请安装钱包扩展");
        }
      } catch (error) {
        console.error("MetaMask 登录失败:", error);
      }
    },

    // Token Pocket 登录逻辑

    // async connectTokenPocket() {
    //   try {
    //     const provider = window.tokenPocket;
    //     if (!provider) {
    //       alert("请安装 Token Pocket 应用");
    //       return;
    //     }
    //     const accounts = await provider.request({
    //       method: "eth_requestAccounts",
    //     });
    //     this.account = accounts[0];
    //     console.log("Token Pocket 连接成功:", this.account);
    //     // 在这里处理登录逻辑
    //     sessionStorage.setItem("account", this.account);
    //     this.$router.back();
    //   } catch (error) {
    //     console.error("Token Pocket 登录失败:", error);
    //   }
    // },
    async connectTokenPocket() {
      var _this = this;
      provider
        .enable()
        .then((res) => {
          let web3 = new Web3(provider);
          _this.account = res[0];
          sessionStorage.setItem("account", this.account);

          // _this.$store.commit("setuserAddress", res[0]);

          // _this.flag = false;
          //设置localStroage值
          // sessionStorage.setItem("account", res[0]);

          //账户更改触发的方法
          provider.on("accountsChanged", (accounts) => {
            sessionStorage.setItem("account", res[0]);
          });
          //账户断开的方法
          provider.on("disconnect", (code, reason) => {
            web3 = null;
            window.sessionStorage.clear();
            location.reload();
          });
        })
        .catch((err) => {});
    },
    close() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less" scoped>
.wallet-selection {
  padding: 20px 38px;
  text-align: center;
  color: white;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #363636;
  margin-bottom: 58px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
.wallet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32px 0;
  padding: 36px 32px;
  // border: 2px solid #363636;
  border-radius: 20px;
  background: #23203E;
  .rightimg {
    width: 36px;
    height: 26px;
  }
}

.wallet-icon {
  width: 68px;
  height: 68px;
  margin-right: 28px;
}

.confirm-btn {
  width: 100%;
  height: 100px;
  background: linear-gradient(90deg, #3D66BE, #D53E9B,);
  border-radius: 64px;
  text-align: center;
  line-height: 100px;
  font-weight: 500;
  font-size: 30px;
  margin-top: 368px;
}
</style>
